<template>
  <div id="panel1">
    <div>
      <img src="../assets/小李子.jpg">
    </div>
    
    <div class="jumbotron">

      <table class="table table-hover">
        <caption>      
          <h2>
            <strong><center>{{title}}</center></strong>
          </h2>
        </caption>
        <thead>
          <tr>
           <th>类型</th>
           <th>具体</th>
         </tr>
       </thead>
       <tbody>
        
        <tr v-for="signal_info in info">
          <td>{{signal_info.type}}</td>
          <td>{{signal_info.specific}}</td>
        </tr>

      </tbody>
    </table>

  </div>
</div>

</template>

<script>
export default {
  name: 'panel1',
  data () {
    return {
      title:"个人简介",
      info:[
      {type:"姓名",specific:"王坚炼"},
      {type:"年龄",specific:"24"},
      {type:"QQ",specific:"492656737"},
      {type:"学校",specific:"武汉理工大学"},
      {type:"所学专业",specific:"电子科学与技术"}


      ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
img{
 width:auto;
 height:auto;
 max-width:100%;
 max-height:100%;
}


</style>
